<% include ../inc/head.ejs%>
<div class="container">

    <div class="col-md-8">
        <div class="chat">
            <div class="panel panel-default">
                <div class="panel-heading">
                    消息列表 <span class="pull-right">当前私聊对象:<em class="sl_name"></em></span>
                </div>
                <div class="panel-body addMsgBody" id="addMsgBody">
                    <ul class="addMsg" id="addMsg">
                        <!--<li class="clearfix"><div class="pull-left "><a href="#">小梦:</a><span>消息1hsdfhasfhashfas</span></div></li>-->
                        <!--<li class="clearfix"><div class="pull-right"><span>消息1</span><a href="#">:小红</a></div></li>-->
                    </ul>
                </div>

            </div>

            <div class="panel panel-default">
                <form action="/articles/comment" method="post">
                    <input type="hidden" value="<%=session_user._id%>" name="user_id" id="user_id" />
                    <input type="hidden" value="<%=session_user.username%>" name="username" id="user_name"/>
                    <input type="hidden" value="" name="receive_id" id="receive_id"/>
                    <div class="panel-body">
                        <textarea class="form-control" cols="30" rows="5" id="content" name="content" placeholder="请输入信息" ></textarea>
                    </div>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-default sendMsg">提交</button>
                        <span class="pull-right errMsg" style="color:red"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="nav_right">
            <h4>用户列表 <span class="pull-right">点击在线用户可私聊</span></h4>
            <ul class="nav nav-pills nav-stacked">
                <% userList.forEach(function(item){
                    if(item.is_online){
                        var addClass="user_online";
                    }else{
                        var addClass="";
                    }
                %>
                <li ><a href="javascript:;" class="gitUser" user_id="<%=item._id%>" user_name="<%=item.username%>" ><span class="badge pull-right <%=addClass%>"><%=item.is_online?'在线':'不在线'%></span><%=item.username%></a></li>
                <%})%>
            </ul>
        </div>
    </div>
</div>
<% include ../inc/footer.ejs%>
<script src="/js/socket.io.min.js"></script>
<!--<script src="/socket.io/socket.io.js"></script>-->
<script>
    $(function(){
        var user_id=$('#user_id').val();
//        var socket=io.connect('https://dreamblog.herokuapp.com:8080');
        var socket=io.connect('localhost:8080');
        socket.on('connecting',function(){
            $('.addMsg').append('<li class="clearfix"><div class="text-center ">系统:<span>正在连接......</span></div></li>')
        });
        socket.on('connect',function(){
            //页面显示在线
            $(".gitUser[user_id='"+user_id+"']").find('span').addClass('user_online').text('在线');
            $('.addMsg').append('<li class="clearfix"><div class="text-center ">系统:<span>连接成功</span></div></li>')
            socket.send({id:user_id});
        });
        socket.on('disconnect',function(){
            $('.addMsg').append('<li class="clearfix"><div class="text-center ">系统:<span>断开连接</span></div></li>');
            $(".gitUser[user_id='"+user_id+"']").find('span').removeClass('user_online').text('不在线');
        });
        socket.on('message',function(msg){
            if(msg.user=='系统'){
                var info='<li class="clearfix"><div class="text-center ">系统:<span>'+msg.content+'</span></div></li>';
            }else{
                var info='<li class="clearfix"><div class="pull-left "><a href="#">'+msg.user+':</a><span>'+msg.content+'</span></div></li>';
            }
            $(info).fadeIn(1000).appendTo('.addMsg');
            $('#addMsgBody').scrollTop(document.getElementById('addMsgBody').scrollHeight-0);
        });
        $('.sendMsg').click(function(){
            var user_name=$('#user_name').val();
            var receive_id=$('#receive_id').val();
            var content=$('#content').val();
            if(!content){

                $('.errMsg').text('内容不能为空！');
                setTimeout(function(){
                    $('.errMsg').text('');
                },3000);
                return false;
            }
            socket.send({user_id:user_id,user_name:user_name,content:content,receive_id:receive_id});
            var info='<li class="clearfix"><div class="pull-right"><span>'+content+'</span><a href="#">:'+user_name+'</a></div></li>';
            $(info).fadeIn(1000).appendTo('.addMsg');
            $('#addMsgBody').scrollTop(document.getElementById('addMsgBody').scrollHeight-0);
            $('#content').val('');

        })
        $('.gitUser').click(function(){
            var user_id=$(this).attr('user_id');
            var user_name=$(this).attr('user_name');
            $('#receive_id').val(user_id);
            $('.sl_name').text(user_name);
            $('#content').val('@'+user_name+":");
        })
    })
</script>